
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    li {
      list-style: none;
    }

    .nav > li {
      float: left;
    }

    .component-footer .footer-inner .footer-copyright .nav li a::after {
      position: absolute;
      content: '';
      right: 0;
      top: 2px;
      bottom: 2px;
      border-right: 1px solid #797A8A;
    }
    a {
      text-decoration: none
    }
    .component-footer .footer-inner .footer-copyright .nav li a::after {
      position: absolute;
      content: '';
      right: 0;
      top: 2px;
      bottom: 2px;
      border-right: 1px solid #797A8A;
    }

    a {
      text-decoration: none
    }

    .component-footer .footer-inner .footer-copyright .nav li a {
      position: relative;
      font-size: 14px;
      color: #797A8A;
      display: inline-block;
      padding: 0 10px 0 6px;
    }

    .component-footer {
      position: relative;
      background: #242424;
      margin-top: 100px;
    }

    .component-footer .footer-inner {
      margin: auto;
      width: 1200px;
      padding-bottom: 60px;
      text-align: center;
      background: #242424;
    }

    .component-footer .footer-inner .footer-tags {
      width: 1200px;
      margin: auto;
      padding: 50px 0;
      border-bottom: 1px solid #505050;
      text-align: center;
    }

    .component-footer .footer-inner .footer-tags .tag-item {
      display: inline-block;
      width: 296px;
      justify-content: center;
    }

    .component-footer .footer-inner .footer-tags .tag-item .item-inner {
      display: inline-flex;
    }

    .component-footer .footer-inner .footer-tags .tag-item .item-inner .img {
      float: left;
      width: 57px;
      height: 57px;
    }

    .component-footer .footer-inner .footer-tags .tag-item .item-inner .img img {
      width: 57px;
      height: 57px;
    }

    .component-footer .footer-inner .footer-tags .tag-item .item-inner .info {
      float: left;
      padding-left: 16px;
      box-sizing: border-box;
      color: #fff;
      text-align: left;
    }

    .component-footer .footer-inner .footer-copyright {
      position: relative;
      margin-top: 30px;
    }

    .el-header a {
      color: #666;
      text-decoration: none;
    }

    .el-menu.el-menu--horizontal {
      border-bottom: 0;
    }

    .el-table .el-table__cell {
      padding: 0;
    }

    .el-table .cell {
      white-space: nowrap; /*设置文本内容不换行*/
      text-overflow: ellipsis; /*设置文本超出时用省略号展示*/
    }

    .component-footer .footer-inner .footer-links {
      width: 1200px;
      margin: auto;
      margin-top: auto;
      margin-top: 20px;
      padding-top: 30px;
      border-top: 1px solid #505050;
      text-align: center;
    }
/*分割线--------------------------------*/
    *{
      padding: 0;
      margin: 0;
    }
    .top {
      height: 80px;
      width: 100%;
    }
    .topleft {
      float: left;
      width: 290px;
      height: 80px;
      background-image: url("loginimgs/logo.jpg" );
      background-repeat: no-repeat;
      background-position: 83px center;
    }
    .topright {
      height: 80px;
      line-height: 80px;
      font-size: 20px;
      font-weight: 700;
      color: gray;
    }
    .maxbg {
      width: 100%;
      height: 600px;
background-image: url("loginimgs/back02.png");
      background-repeat: no-repeat;
      background-size: cover;
    }
    .entry {
      width: 420px;
      height: 350px;
      background-color: white;
      border: 1px solid white;
      position: relative;
      margin-left: 930px;
      top: 76px;
    }
    .left {
      float: left;
      padding-top: 20px;
      padding-left: 15px;
      font-size: 20px;
      color: gray;
      font-weight: 500;
    }
    .right {
      float: right;
      width: 150px;
      background-color: white;
      background-repeat: no-repeat;
      background-position: 50px 20px;
      font-size: 15px;
      color: red;
      font-weight: 500;
      padding-top: 17px;
      right: 10px;
      text-indent: 70px;
    }
    .username {
      clear: both;
      border: 2px solid rgb(214, 214, 214);
      width: 382px;
      height: 40px;
      margin-left: 15px;
      margin-top: 35px;
      background-image: url("loginimgs/fixed_01.png");
      background-repeat: no-repeat;
      background-position: 0 center;
      background-size: 8%;
      outline: none;
      color: black;
      text-indent: 3em;
      font-size: 16px;
    }
    .userpwd {
      clear: both;
      border: 2px solid rgb(214, 214, 214);
      width: 382px;
      height: 40px;
      margin-left: 15px;
      margin-top: 35px;
      background-image:url("loginimgs/new-lock.png");
      background-repeat: no-repeat;
      background-position: 0 center;
      background-size: 8%;
      color: black;
      text-indent: 3em;
      font-size: 16px;
      outline: none;
    }
    .litlebox {
      margin-top: 30px;
      margin-left: 15px;
    }
    .login {
      color: rgb(145, 135, 135);
      font-size: 14px;
      padding-top: 20px;
      height: 20px;
      line-height: 20px;
    }
    .password {
      color: rgb(145, 135, 135);
      font-size: 14px;
      padding-top: 20px;
      height: 20px;
      line-height: 20px;
      padding-left: 245px;
    }
    .DengLu {
      margin-top: 20px;
      margin-left: 15px;
    }
    .denglu {
      width: 382px;
      height: 38px;
      background-color: rgb(228, 57, 60);
      border: rgb(228, 57, 60);
      color: white;
      font-size: 16px;
      outline: none;
    }
    .denglu:active {
      outline: none;
      box-shadow: 1px 1px 2px gray;
    }
    .bottoms {
      height: 80px;
      width: 100%;
    }
    .tet {
      padding-top: 15px;
      text-align: center;
      color: gray;
      font-size: 14px;
    }
    .txt {
      padding-top: 15px;
      text-align: center;
      color: gray;
      font-size: 14px;
    }
      </style>
</head>
<body>
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>

<el-container>
  <el-header>
    <div class="top">
    <div class="topleft"></div>
    <div class="topright">欢迎登录</div>
  </div>
  </el-header>


  <el-main>
    <div class="maxbg">
    <div class="entry">
      <div>
        <span class="left">会员登录</span>
        <span class="right">立即注册</span>
      </div>
      <div>
        <input type="text" class="username" placeholder="邮箱/用户名">
        <input type="password" class="userpwd" placeholder="请输入密码">
      </div>
      <div class="litlebox">
        <span class="login"><input type="checkbox">记住账号</span>
        <span class="password">忘记密码?</span>
      </div>
      <div class="DengLu">
        <a href=" "> <input type="submit" value="登录" class="denglu"></a>
      </div>
    </div>
  </div>
  </el-main>

  <el-footer>
    <div class="component-footer">
      <div class="footer-inner">
        <div class="footer-tags">
          <div class="tag-item">
            <div class="item-inner">
              <div class="img"><img
                      src="loginimgs/footer-icon1.png">
              </div>
              <div class="info">
                <p class="title">正品承诺</p>
                <p class="sub-title">正品保障 假一赔十</p>
              </div>
            </div>
          </div>
          <div class="tag-item">
            <div class="item-inner">
              <div class="img"><img
                      src="loginimgs/footer-icon2.png">
              </div>
              <div class="info">
                <p class="title">低价保障</p>
                <p class="sub-title">缩短中间环节 确保低价</p>
              </div>
            </div>
          </div>
          <div class="tag-item">
            <div class="item-inner">
              <div class="img"><img
                      src="loginimgs/footer-icon3.png">
              </div>
              <div class="info">
                <p class="title">7天无忧退换</p>
                <p class="sub-title">退换无忧 售后无忧</p>
              </div>
            </div>
          </div>
          <div class="tag-item">
            <div class="item-inner">
              <div class="img"><img
                      src="loginimgs/footer-icon4.png">
              </div>
              <div class="info">
                <p class="title">满88包邮</p>
                <p class="sub-title">部分特殊商品除外</p>
              </div>
            </div>
          </div>
        </div>

        <div class="footer-copyright">
          <ul class="nav">
          </ul>

          <ul class="nav">
            <li><a href="http://www.yczy365.com/goods.html?category_ids=1199" target="_blank"
                   rel="opener">狗粮专区</a></li>
            <li><a href="http://www.yczy365.com/goods.html?category_ids=1201" target="_blank"
                   rel="opener">猫粮专区</a></li>
            <li><a href="http://www.yczy365.com/goods.html?category_ids=1203" target="_blank"
                   rel="opener">保健品专区</a></li>
            <li><a href="http://www.yczy365.com/goods.html?category_ids=1205" target="_blank"
                   rel="opener">清洁专区</a></li>
            <li><a href="http://www.yczy365.com/goods.html?category_ids=1207" target="_blank"
                   rel="opener">驱虫专区</a></li>
            <li><a href="http://www.yczy365.com/goods.html?category_ids=1209" target="_blank"
                   rel="opener">零食专区</a></li>
            <li><a href="http://www.yczy365.com/goods.html?category_ids=1211" target="_blank"
                   rel="opener">罐头专区</a></li>
            <li><a href="http://www.yczy365.com/goods.html?category_ids=1213" target="_blank"
                   rel="opener">用品专区</a></li>
            <li><a href="http://www.yczy365.com/goods.html?category_ids=1215" target="_blank"
                   rel="opener">玩具专区</a></li>
            <li><a href="http://www.yczy365.com/goods.html?category_ids=1217" target="_blank"
                   rel="opener">猫砂专区</a></li>
          </ul>
          <div class="copyright" style="color: #797A8A;"><p>技术支持:JSD2211 4号工作室</p></div>
        </div>

        <div class="footer-links">
          <a class="link-item link-item-1" href="javascript:;" title="">
            <div class="item-inner">
              <div class="img"><img src=""></div>
              <div class="title"></div>
            </div>
          </a>
        </div>
      </div>
    </div>
  </el-footer>
</el-container>
</body>
